<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录音下载</title>
    <style type="text/css">
        .voice_list {
            background: #fff;
            overflow: hidden;
        }

        .voice_list li {
            list-style: none;
            float: left;
            padding: 20px;
        }

        .voice_list li a {
            display: block;
            width: 100px;
            color: #333;
            text-decoration: none;
        }

        .voice_icon {
            display: block;
            width: 60px;
            height: 60px;
            background: #eee url(/public/images/sound.png) center center no-repeat;
            margin: 10px auto;
            border-radius: 50%;
        }

        .voice_list li a:hover {
            opacity: 0.8;
        }

        .voice_list li a:hover p {
            color: #1E90FF;
        }

        .no_message {
            text-align: center;
            margin-top: 150px;
        }

    </style>
</head>
<body>
<div class="voice_list">
    <?php if(empty($sound_info)) {?>
    <div class="no_message">
        <img src="/public/images/norecord.png">
        <p>暂无记录</p>
    </div>
    <?php } else {?>
    <ul>
        <volist name="sound_info" id="vo">
            <!--<li>-->
                <!--<a href="{$vo}">-->
                    <!--<div class="voice_icon">-->
                    <!--</div>-->
                    <!--<p style="margin-left: 10px;">{$key}</p>-->
                <!--</a>-->
            <!--</li>-->
            <li>
                <audio controls="controls">
                    <source src="{$vo}" type="audio/mpeg">
                </audio>
                <p style="margin-left: 70px;">{$key}</p>
            </li>
        </volist>
    </ul>
    <?php } ?>
</div>
</body>
</html>